<template>
  <q-page>
    <div class="fit">
      <div class="text-center">
        {{ iconStore.iconClickItem?.info.iconTypeName }}
        {{ iconStore.iconClickItem?.info.iconNames.length }}
      </div>
      <div class="row q-pa-sm" v-if="iconStore.iconClickItem">
        <div
          v-for="icon in iconStore.iconClickItem.iconList"
          :key="icon.label"
          class="col-3"
        >
          <q-card
            @click="
              () => {
                iconClick(icon);
              }
            "
            class="intersection-icon-box--inner q-ma-sm"
          >
            <div class="full-width row justify-between items-center">
              <q-btn
                size="sm"
                :icon="mdiContentCopy"
                flat
                padding="0"
                color="grey-13"
                @click.stop="
                  () => {
                    copyToClipboard(icon.label).then(() => {
                      $q.notify({
                        message: `'${icon.label}' 已经复制到剪贴板`,
                        position: 'top',
                        // icon: icon.path,
                        color: 'white',
                        textColor: 'primary',
                      });
                    });
                  }
                "
              >
                <q-tooltip
                  anchor="top middle"
                  self="bottom middle"
                  :offset="[10, 10]"
                  class="primary my-tooltip"
                >
                  复制 "{{ icon.label }}" 到剪切板
                </q-tooltip>
              </q-btn>
              <q-btn
                size="sm"
                :icon="mdiImport"
                flat
                padding="0"
                color="grey-13"
                @click.stop="
                  () => {
                    copyToClipboard(
                      `import {${icon.label}} from '${iconStore.iconClickItem?.info.fromStr}';`,
                    ).then(() => {
                      $q.notify({
                        message: `import {${icon.label}} from '${iconStore.iconClickItem?.info.fromStr}';已经复制到剪贴板`,
                        position: 'top',

                        color: 'white',
                        textColor: 'primary',
                      });
                    });
                  }
                "
              >
                <q-tooltip
                  anchor="top middle"
                  self="bottom middle"
                  :offset="[10, 10]"
                  class="primary my-tooltip"
                >
                  复制 "import &#123; {{ icon.label }} &#125; from '{{
                    iconStore.iconClickItem?.info.fromStr
                  }}'" 到剪切板
                </q-tooltip>
              </q-btn>
            </div>
            <q-card-section>
              <div class="text-h6 text-center">
                <q-icon size="80px" color="grey-9" :name="icon.icon" />
              </div>
              <div class="text-subtitle2 text-center">{{ icon.label }}</div>
            </q-card-section>
          </q-card>
        </div>
      </div>
      <div v-else class="">
        <q-tabs v-model="tab" class="">
          <q-tab name="about" label="关于" />
        </q-tabs>

        <q-tab-panels v-model="tab" animated>
          <q-tab-panel name="about">
            <div class="text-h6">图标选择器</div>
            <div>现在已经支持1万+图标</div>

            <div>
              如需使用quasar-extras-svg-icons分类下的图标下，需要安装额外的图标库
            </div>

            <div>
              安装命令：<span class="text-light-blue-5"
                >npm i quasar-extras-svg-icons</span
              >
            </div>
          </q-tab-panel>
        </q-tab-panels>
      </div>
    </div>

    <q-dialog
      ref="dialogRef"
      v-model="confirm"
      seamless
      position="bottom"
      style="border-top: 1px solid #e1e1e1"
    >
      <q-card
        class="q-pa-sm"
        :style="{ minWidth: '100vw', minHeight: '200px' }"
      >
        <q-card-section class="row justify-center items-center no-wrap q-pa-sm">
          <div class="col row justify-center no-wrap">
            <p class="font-mono ellipsis" style="font-size: 28px">
              {{ iconItem?.label }}
            </p>
            <q-icon
              size="xs"
              :name="mdiContentCopy"
              color="grey-13"
              @click="nameToClipboard"
            >
              <q-tooltip class="primary my-tooltip">
                复制 " {{ iconItem?.label }} " 到剪切板
              </q-tooltip>
            </q-icon>
          </div>
          <q-space class="q-pr-lg" />
          <q-btn
            flat
            round
            :icon="mdiClose"
            @click="
              () => {
                confirm = false;
              }
            "
          />
        </q-card-section>

        <q-card-section class="row no-wrap q-pa-sm">
          <div class="row justify-center" style="width: 100%">
            <div class="q-pa-sm fill">
              <q-icon
                :name="iconItem?.icon"
                size="148px"
                class="q-pa-xs fill"
                :class="colorClasses"
                style="max-width: 200px; min-width: 140px"
              />
            </div>
            <div class="justify-start q-gutter-sm q-pa-sm">
              <div class="col row bordered" style="max-width: 142px">
                <div
                  v-for="color in colors"
                  :key="color"
                  :class="colorClass(color)"
                  style="width: 20px; height: 20px"
                  @click.stop="changeColor(color)"
                />
              </div>
              <q-toggle v-model="inverted" label="Invert colors" />
            </div>

            <div
              class="row justify-start q-gutter-sm q-pa-sm"
              style="max-width: 230px"
            >
              <div class="col">
                <div style="font-size: 18px">复制到剪切板...</div>
                <div class="row q-gutter-xs">
                  <q-btn
                    no-caps
                    size="sm"
                    flat
                    class="user-button"
                    @click="nameToClipboard"
                  >
                    <q-tooltip :delay="250" class="primary my-tooltip">
                      复制 "{{ iconItem?.label }}" 到剪切板
                    </q-tooltip>
                    名称
                  </q-btn>
                  <q-btn
                    no-caps
                    size="sm"
                    flat
                    class="user-button"
                    @click="importToClipboard"
                  >
                    <q-tooltip :delay="250" class="primary my-tooltip">
                      复制 "import &#123; {{ iconItem?.label }} &#125; from '{{
                        iconStore.iconClickItem?.info.fromStr
                      }}'" 到剪切板
                    </q-tooltip>
                    导入语句
                  </q-btn>
                  <q-btn
                    no-caps
                    size="sm"
                    flat
                    class="user-button"
                    @click="svgToClipboard"
                  >
                    <q-tooltip :delay="250" class="primary my-tooltip">
                      复制SVG "{{ iconItem?.label }}" 到剪切板
                    </q-tooltip>
                    SVG
                  </q-btn>
                  <q-btn
                    no-caps
                    size="sm"
                    flat
                    class="user-button"
                    @click="inlineToClipboard"
                  >
                    <q-tooltip :delay="250" class="primary my-tooltip">
                      复制SVG内联到 (ex: 'const
                      {{ iconItem?.label }} = "M..."')
                    </q-tooltip>
                    Inline
                  </q-btn>
                  <q-btn
                    no-caps
                    size="sm"
                    flat
                    class="user-button"
                    @click="qiconToClipboard"
                  >
                    <q-tooltip :delay="250" class="primary my-tooltip">
                      复制 "&lt;q-icon :name="{{ iconItem?.label }}" /&gt;"
                      到剪切板
                    </q-tooltip>
                    QIcon
                  </q-btn>
                  <q-btn
                    no-caps
                    size="sm"
                    flat
                    class="user-button"
                    @click="qbtnToClipboard"
                  >
                    <q-tooltip :delay="250" class="primary my-tooltip">
                      复制 "&lt;q-btn :icon="{{ iconItem?.label }}" /&gt;"
                      到剪切板
                    </q-tooltip>

                    QBtn
                  </q-btn>
                  <q-btn
                    no-caps
                    size="sm"
                    flat
                    class="user-button"
                    @click="rawToClipboard"
                  >
                    <q-tooltip :delay="250" class="primary my-tooltip">
                      将原始SVG复制到剪贴板 (ex: "M...")
                    </q-tooltip>

                    Raw
                  </q-btn>
                </div>
              </div>
              <div class="col-auto">
                <!-- other content here -->
              </div>
            </div>
          </div>
        </q-card-section>
      </q-card>
    </q-dialog>
  </q-page>
</template>

<script setup lang="ts">
import { mdiContentCopy, mdiImport, mdiClose } from '@quasar/extras/mdi-v7';
import { computed, ref } from 'vue';
import { copyToClipboard } from 'quasar';
import { useQuasar } from 'quasar';
import { iconListType, useIconStore } from 'src/stores/IconStore';
const iconStore = useIconStore();
const $q = useQuasar();
const colors = [
  'black',
  'red',
  'pink',
  'purple',
  'deep-purple',
  'indigo',
  'blue',
  'light-blue',
  'cyan',
  'teal',
  'green',
  'light-green',
  'lime',
  'yellow',
  'amber',
  'orange',
  'deep-orange',
  'brown',
  'grey',
  'blue-grey',
  'white',
];

const useDark = ref($q.dark.isActive);
const inverted = ref(false);

const textColor = ref('black');
const colorClasses = computed(() => {
  let color = '',
    bgColor = '';
  if (inverted.value) {
    color += 'bg-' + textColor.value;
    bgColor += useDark.value ? 'text-dark' : 'text-white';
  } else {
    color += 'text-' + textColor.value;
    bgColor += useDark.value ? '' : 'bg-white';
  }
  if (textColor.value !== 'black' && textColor.value !== 'white') color += '-8';
  return [color, bgColor].join(' ');
});

const tab = ref('about');

const confirm = ref(false);

function colorClass(color: string) {
  let newColor = 'bg-' + color;
  if (color !== 'black' && color !== 'white') newColor += '-8';
  if (textColor.value === color) {
    newColor += ' active-color';
  }
  return newColor;
}

const iconItem = ref<iconListType[0]>({ label: '', icon: '' });

function changeColor(color: string) {
  textColor.value = color;
}

const iconClick = (item: iconListType[0]) => {
  confirm.value = true;
  iconItem.value = item;
};

const nameToClipboard = () => {
  sendToClipboard(
    iconItem.value.label,
    `'${iconItem.value.label}' 已复制到剪切板`,
    iconItem.value.icon,
  );
};
const rawToClipboard = () => {
  sendToClipboard(
    iconItem.value.icon,
    `Raw: '${iconItem.value.label}' 已复制到剪切板`,
    iconItem.value.icon,
  );
};
const qbtnToClipboard = () => {
  const inline = `<q-btn :icon="${iconItem.value.label}" />`;
  sendToClipboard(
    inline,
    `QBtn: '${iconItem.value.label}' 已复制到剪切板`,
    iconItem.value.icon,
  );
};

function qiconToClipboard() {
  const inline = `<q-icon :name="${iconItem.value.label}" />`;
  sendToClipboard(
    inline,
    `QIcon: '${iconItem.value.label}' 已复制到剪切板`,
    iconItem.value.icon,
  );
}
function inlineToClipboard() {
  const inline = `const ${iconItem.value.label} = '${iconItem.value.icon}'`;
  sendToClipboard(
    inline,
    `Inline: '${iconItem.value.label}' 已复制到剪切板`,
    iconItem.value.icon,
  );
}
function svgToClipboard() {
  const svg = createSvg(iconItem.value.icon);
  sendToClipboard(
    svg,
    `SVG: rehydrated SVG for '${iconItem.value.label}' 已复制到剪切板`,
    iconItem.value.icon,
  );
}

function splitSvg(icon: string) {
  const [def, viewBox] = icon.split('|');

  return {
    nodes: def.split('&&').map((path) => {
      const [d, style, transform] = path.split('@@');
      return {
        path: {
          style,
          d,
          transform,
        },
      };
    }),
    viewBox: viewBox !== void 0 ? viewBox : '0 0 24 24',
  };
}

function createSvg(iconStr: string) {
  const icon = splitSvg(iconStr);
  let svg = `<svg viewBox="${icon.viewBox}">\n`;
  icon.nodes.forEach((node) => {
    svg +=
      '  ' +
      `<path d="${node.path.d}" ${node.path.style ? 'style="' + node.path.style + '"' : ''} ${node.path.transform ? 'transform="' + node.path.transform + '"' : ''}`.trim() +
      '></path>\n';
  });
  svg += '</svg>\n';

  return svg;
}

function importToClipboard() {
  const inline = `import { ${iconItem.value.label} } from '${iconStore.iconClickItem?.info.fromStr}'`;
  sendToClipboard(
    inline,
    `Import: '${iconItem.value.label}' 已复制到剪切板`,
    iconItem.value.icon,
  );
}

const sendToClipboard = (data: string, message: string, icon: string) => {
  copyToClipboard(data).then(() => {
    $q.notify({
      message: message,
      position: 'top',
      icon: icon,
      color: 'white',
      textColor: 'primary',
    });
  });
};
</script>

<style lang="scss">
.intersection-icon-box {
  &--inner {
    transition: all 0.1s ease-in-out;
    &:hover {
      transform: scale(1.1);
      z-index: 100;
    }
  }
}
</style>
